<template>
  <form class="login">
    <div class="login-item">
      <span class="label">邮箱</span>
      <input type="text" v-model="loginForm.email">
      <span class="msg" v-if="userValid.status">{{userValid.errMsg}}</span>
    </div>
    <div class="login-item">
      <span class="label">密码</span>
      <input type="password" v-model="loginForm.password">
    </div>
    <div class="btn-group">
      <a href="javascript:void(0);" class="btn btn-submit" @click="fnLogin">登录</a>
      <span class="login-msg">{{loginMsg}}</span>
    </div>
  </form>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  //引入组件
  @Component
  export default class Login extends Vue {
    //登录信息
    loginForm = {
      email : '',
      password : ''
    }
    emailFlag : boolean = false
    loginMsg : string = ''

    //computed  计算属性
    //邮箱验证
    get userValid () {
      let status,errMsg

      if (!/@/g.test(this.loginForm.email)) {
        status = true
        errMsg = '邮箱格式错误！'
      } else {
        status = false
        errMsg = ''
      }

      if (!this.emailFlag) {
        errMsg = ''
        this.emailFlag = true
      }

      return {
        status,
        errMsg
      }
    }

    //methods
    //登录操作
    fnLogin():void {
      let that = this
      if (!that.userValid.status && that.loginForm.password != '') {
        sessionStorage.setItem('user',JSON.stringify(that.loginForm))
        that.loginMsg = ''
        //刷新当前组件
        this.$router.go(0)
      } else {
        that.loginMsg = '登录失败！'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    padding: 20px;
    font-family: 微软雅黑;

    .login-item {
      display: flex;
      flex-direction: row;
      margin-bottom: 4%;

      .label {
        width: 10%;
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #48576a;
        line-height: 1;
        padding: 11px 12px 11px 0;
        box-sizing: border-box;
      }

      input {
        width: 50%;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        font-size: inherit;
        height: 36px;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      }

      .msg {
        width: 30%;
        font-size: 13px;
        color: red;
        padding: 11px 12px 11px 10px;
      }
    }

    .btn-group {
      padding-left: 20px;

      .btn {
        font-size: 14px;
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c4c4c4;
        padding: 10px 15px;
        border-radius: 4px;
        text-decoration: none;
      }

      .btn-submit {
        color: #fff;
        background-color: #4fc08d;
        border-color: #4fc08d;
        margin-left: 25px;
      }

      .login-msg {
        font-size: 13px;
        color: red;
        padding-left: 10px;
      }
    }
  }
</style>
